<template>
	<view class="item" @click="handelItemClick">
		<view class="item-content">
			<image v-if="resource.icon" class="image" :src="resource.icon"></image>
			<view class="middel" v-if="resource.type == 'page'">
				<text>{{ resource.title }}</text>
			</view>	
			<view class="middel" v-else-if="resource.type == 'event'">
				<button :open-type="resource.name" class="event-btn">
					{{ resource.title }}
				</button>
			</view>
			<view class="right"><uni-icons type="right" size="16" color="#BBBBBB"></uni-icons></view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
	name: 'xk-list-item',
	props: {
		resource: {
			type: Object,
			default: () => {
				return {}
			}
		}
	},
	data() {
		return {}
	},
	computed: {
		...mapState(['hasLogin'])
	},
	options: { styleIsolation: 'shared' },
	mounted() {},
	methods: {
		handelItemClick() {
			if (this.hasLogin === false) {
				uni.navigateTo({
					url: './login/login'
				})
			} else
				uni.navigateTo({
					url: this.resource.path
				})
		}
	}
}
</script>

<style lang="scss" scoped>
.item {
	width: 100%;
	.item-content {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 10rpx 0;
		.image {
			width: 34rpx;
			height: 34rpx;
			margin-right: 20rpx;
		}
		.middel {
			flex: 1;
			font-size: 28rpx;
			.event-btn{
				font-family: inherit;
				border-radius: 0;
				text-align: left;
				background-color: transparent;
				line-height: 15px;
				font-size: 28rpx;
				margin: 0;
				padding: 0;
				color: #333;
				box-shadow: none;
				padding-top: 2px;
				&::after{
					  border: 0; 
					  height: auto;
					  border-radius: 0;
				}
			}
		}
		.right {
		}
	}
}
</style>
